<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/about.css" />
		<link rel="stylesheet" type="text/css" href="css/shop.css" />
		<link rel="stylesheet" type="text/css" href="css/allmovielist.css" />
		
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/popper.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- logo -->
		<div class="container py-3">
			<div class="row">
				<div class="col-lg-2 col-12 text-center pb-2">
					<img src="img/logo-header-06.png" />
				</div>
				<!-- 头部搜索框 -->
				<div class="col-lg-6 col-12 mb-3">
					<form class="rounded-pill d-flex border search">
						<ul class="nav ml-3">
							<li class="nav-item">
								<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" style="color: gray;">MOVIES</a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item menu_jg">VIDEOS</a>
									<hr style="color: gainsboro;" />
									<a href="#" class="dropdown-item  menu_jg">CATEGORIES</a>
									<hr style="color: gainsboro;" />
									<a href="#" class="dropdown-item menu_jg">POPULAR</a>
								</div>
							</li>
						</ul>
						<input type="text" class="border-0 headfa  border-right-0 border-bottom-0 border-top-0 mr-2 h-75 w-75 align-self-center" />
						<a href="#" class="fa fa-search mr-3 pt-2 mt-1" style="color: gray;"></a>
					</form>
				</div>
				
				<div class="col-lg-4 d-lg-block d-none ">
					<div class="d-flex flex-wrap ml-auto">
						<div class="rounded-circle mx-1 div1">
							<i class="fa fa-facebook fa-1x aa mx-auto"></i>
						</div>
						<div class="rounded-circle mx-1 div1">
							<i class="fa fa-twitter fa-1x aa mx-auto"></i>
						</div>
						<div class="rounded-circle mx-1 div1">
							<i class="fa fa-google-plus fa-1x aa mx-auto"></i>
						</div>
						<div class="rounded-circle mx-1 div1">
							<i class="fa fa-twitter fa-1x aa mx-auto"></i>
						</div>
						<button type="button" class="btn btn-danger rounded-pill">SUBMIT VIDFO</button>
					</div>
				</div>
				
			</div>
		</div>
		<!-- 导航栏 -->
		<div class="w-100 headertwo">
			<div class="container">
				<div class="navbar navbar-expand-md py-0">
					<button class="navbar-toggler  mr-5 py-2 d-block justify-content-center" data-toggle="collapse" data-target="#menu">
						<i class="fa fa-bars bar text-light"></i>
					</button>
					<div class="navbar-inner collapse navbar-collapse" id="menu">
						<ul class="nav nav-pills navbar-nav">
							<li><a href="index.html">HOME</a></li>
							<li class="dropdown"><a href="shop.html">MOVIE</a>
								<ul class="dropdown-menu head2 py-0">
									<li><a href="shop.html">Shop</a></li>
									<li><a href="shop_details.html">Shop_details</a></li>
								</ul>
							</li>
							<li class="dropdown"><a href="video.html">VIDEO</a>
								<ul class="dropdown-menu py-0">
									<li><a href="video.html">Video</a></li>
									<li><a href="video_details.html">Video_details</a></li>
								</ul>
							</li>
							<li class="dropdown"><a href="about.html">FEATURES</a>
								<ul class="dropdown-menu py-0">
									<li><a href="about.html">About</a></li>
									<li><a href="submit.html">Submit</a></li>
									<li><a href="list_authors.html">List_authors</a></li>
									<li><a href="authors_details.html">Authors_details</a></li>
								</ul>
							</li>
							<li class="dropdown"><a href="blog.html">BLOG</a>
								<ul class="dropdown-menu py-0">
									<li><a href="blog.html">Blog</a></li>
									<li><a href="blog_details.html">Blog_details</a></li>
								</ul>
							</li>
							<li><a href="contact.us.html">CONTACT</a></li>
						</ul>
					</div>
					<div class="right ml-auto">
						<span class="mr-0">
							<i class="fa fa-user"></i>
							<span>WELCOME GUEST!</span>
							<span style="color: red;">LOGIN</span>
						</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 背景 -->
		<div style="background-image:url(img/bg-page-title-01.jpg);width: 100%;height: 200px;">
			<!-- 黑幕 -->
			<div class="container-fluid" style="background-color:rgba(0,0,0,0.5);width: 100%;height: 200px;">
		
		
				<!--single blog-->
		
				<div class="container p-0">
		
					<h1 class="text-center pt-5 " style="color: white;">shop</h1>
					<p class="text-center  py-3 pb-5 "style="color: white;"><span>Home/</span>
						<span style="color: red;">/shop</span></p>
		
				</div>
			</div>
		</div>
		<!-- 中间 -->
		<div class="container mt-5">
			<div class="row container">
			<!-- 中左 -->
			<div class="col-lg-9 col-12">
				<div class="row px-0 ">
					<div class="col-lg-5 col-12 px-0">
						<div class="row pb-5"id="app">
							<div class="col-12">
								<img src="img/single-product-01.jpg"class="w-100" />
							</div>
							<div class="col-4 mt-4">
								<img src="img/single-product-01.jpg"class="w-100" />
							</div>
							<div class="col-4 mt-4">
						<img src="img/single-product-02.jpg"class="w-100" />
							</div>
							<div class="col-4 mt-4">
							<img src="img/single-product-03.jpg"class="w-100" />
							</div>
						</div>
					</div>
					<div class="col-lg-7  col-12 pl-lg-4">
						<p style="font-size: 25px; margin-bottom: 10px;">Capatain America</p>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star-o text-warning"></i>
						<i class="fa fa-star-o text-warning"></i>
						<i class="fa fa-star-o text-warning"></i>
						<span class="text-muted pl-3">7/10</span>
						<p class="text-danger font-weight-bold py-4 mb-0"><span class="text-muted mr-2" style="text-decoration: line-through;">$9.00</span>$7.00</p>
						<p style="font-size: 16px;" class="text-muted">Aldus PageMaker including versions of Lorem Ipsum. It was
							popularised in the 1960s with the release of <br>Letraset sheets containing Lorem Ipsum passages, and more
							recently with desktop publishing software like Aldus PageMaker including versions</p>
						<div class="btn-group  py-4">
							<span class="mr-2 mt-2 font-weight-bold font-italic">Quanlity:</span>
							<button class="btn border px-3 out"><b>-</b></button>
							<input type="text" class="border text-center va" value="1" style="width: 40px;">
							<button class="btn border px-3 add" style="width: 40px;"><b>+</b></button>
						</div>
						<br />
						<button class="btn btn-danger rounded-pill mb-3 px-5">ADD TO CART</button>
						<p style="font-size: 20px;">Categories:<span class="text-danger ">Documentaries,Drama</span></p>
					</div>
				</div>
				<!-- 选项卡 -->
				<div class="row jg">
				<ul class="nav">
								<li class="nav-item pb-1">
									<a href="#one" class="nav-link active p-0 " data-toggle="tab"style="color: #FC5A6D;">Description<span class="ml-2 mr-2">·</span></a>
								</li>
								<!-- 点 -->
								<!-- <li class="nav-item">
									<a href="#" class="nav-link" data-toggle="tab"style="color: #FC5A6D;"><b >·</b></a>
								</li> -->
								<li class="nav-item pb-1">
									<a href="#two" class="nav-link p-0" data-toggle="tab"style="color: black;">Reviews(0)<span class="ml-2 mr-2"> ·</span></a>
								</li>
								
								<li class="nav-item pb-1">
									<a href="#three" class="nav-link p-0" data-toggle="tab"style="color: black;">Triailer</a>
								</li>
								
					</ul>
				</div>	
					
					
					<div class="tab-pane active " id="all">
							<!-- 第一行 -->		
					<div class="tab-content ">
						<div class="tab-pane active " id="one">
							
							<p class="mt-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem lpsum has been the
								industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
								scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
								electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
								of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
								like Aldus PageMaker including vevrsions of Lorem Ipsum. It was popularised in the 1960s with the release
								of Letraset sheets containing Lorem lpsum passages</p>
						</div>
						<div class="tab-pane " id="two">
						
							<p>Reviews(0).</p>
						</div>
						<div class="tab-pane " id="three">
						
							<p>Triailer.</p>
						</div>
						
					</div>		
						<!-- 第二行 -->	
							
						
						
								</div>
				<!-- Related Products -->
				<div class="row pt-5">
					<p style="font-size: 25px;">Related Products </p>
					<div class="row text-center pt-2">
						<div class="col-lg-4 col-12">
							<div class="pic">
								<img src="img/product-05.jpg" class="w-100" />
							</div>
							<h4 class="py-3">Best Song CD</h4>
							<p class="text-danger font-weight-bold"><span class="text-muted mr-2" style="text-decoration: line-through;">$9.00</span>$7.00</p>
						</div>
						<div class="col-lg-4 col-12">
							<div class="pic">
								<img src="img/product-06.jpg" class="w-100" />
							</div>
							<h4 class="py-3">Best Song CD</h4>
							<p class="text-danger font-weight-bold"><span class="text-muted mr-2" style="text-decoration: line-through;">$9.00</span>$7.00</p>
						</div>
						<div class="col-lg-4 col-12">
							<div class="pic">
								<img src="img/product-07.jpg" class="w-100" />
							</div>
							<h4 class="py-3">Best Song CD</h4>
							<p class="text-danger font-weight-bold">$9.00</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 中右 -->
			<div class="col-lg-3  col-12 border-left">
					
					<!-- categories -->
					<h5 style="border-left:4px solid red ;padding-left:7px ;">CATEGORIES</h5>
					<!-- 表格 -->
					<div class="text-muted py-3 border1">
						<p>
							<a href="#"><i class="fa fa-caret-right pr-3"></i>Film marker<span style="float: right;">32</span></a>
						</p>
						<p>
							<a href="#"><i class="fa fa-caret-right pr-3"></i>Film studio<span style="float: right;">32</span></a>
						</p>
						<p>
							<a href="#"><i class="fa fa-caret-right pr-3"></i>Life style<span style="float: right;">16</span></a>
						</p>
						<p>
							<a href="#"><i class="fa fa-caret-right pr-3"></i>Fashion<span style="float: right;">08</span></a>
						</p>
						<p>
							<a href="#"><i class="fa fa-caret-right pr-3"></i>Film online<span style="float: right;">45</span></a>
						</p>
						<p>
							<a href="#"><i class="fa fa-caret-right pr-3"></i>Film studio<span style="float: right;">32</span></a>
						</p>
					</div>
					<!--  -->
						<h5>LATSET POSTS</h5><br>
					<div class="row">
						
						<!-- 图一 -->
						<div class="col-3">
							<img src="img/post-53.jpg" />
						</div>
						<div class="col-9 pl-5 ">
							<p style="font-weight: normal;">Mirum est notare quam littera...</p>
						<p class="text-danger font-weight-bold"><span class="text-muted mr-2" style="text-decoration: line-through;">$9.00</span>$7.00</p>
						</div>
					
						<!-- 图二 -->
						<div class="col-3">
							<img src="img/post-54.jpg" />
						</div>
						<div class="col-9 pl-5 ">
							<p style="font-weight: normal;">Fashion Outfit ldeas to Try From</p>
						<p class="text-danger font-weight-bold"><span class="text-muted mr-2" style="text-decoration: line-through;">$9.00</span>$7.00</p>
						</div>
						<!-- 图三 -->
						<div class="col-3">
							<img src="img/post-55.jpg" />
						</div>
						<div class="col-9 pl-5 ">
							<p style="font-weight: normal;">7 Soaps to Supercharge Your Daily</p>
						<p class="text-danger font-weight-bold"><span class="text-muted mr-2" style="text-decoration: line-through;">$9.00</span>$7.00</p>
						</div>
					</div>
					<!-- ----- -->
					<div class=" border1">
					<h5 style="border-left:4px solid red ;padding-left:7px ;margin-bottom: 30px;mt-3">TAGS CLOUD</h5>
					<button class="btn border mr-1 px-1 py-2 my-1 text-muted">Film Oline</button>
					<button class="btn border mr-1 px-1 py-2 my-1 text-muted">Creative</button>
					<button class="btn border mr-1 px-2  py-2 my-1 text-muted">Design</button>
					<button class="btn border mr-1 px-2  py-2 my-1 text-muted">Landing</button>
					<button class="btn border mr-1 px-2  py-2 my-1 text-muted">Skill</button>
					<img src="img/ads-04.jpg" class="pt-3 w-100" />
					</div>
			</div>
		</div>
	</div>
		<!-- 尾部 -->
		<div style="background-color:#222222;" class="py-5">
			<div class="container row" style="margin: 0px auto;">
				<!--尾- 左 -->
				<div class="col-lg-4 mt-4 text-center zuo">
					<img src="img/logo-header-05.png" class="mt-2" />
					<p class="mt-4 hs">
						Lommodo ligula eget dolor.Aenean massa.Cum sociis
						que penatibus et magins dis parturent montes lorem,
						nascetur ridiculus.Donec quam delis,ultricies nec
						masson.Cum sociis
					</p>
		
					<!-- <li class="nav-item dropdown btn-group ml-auto mt-3">
						<input type="text" placeholder="Email" style="background-color: #222222;border: white;" class="border w-75 " />
						<a href="#" class="btn" style="background-color: red;color: white;">SUBSCRIBE</a>
					</li> -->
				<form  class=" d-flex border-0 W-100 py-3 container">
				<input type="text" class="border border-dark w-75 px-3 ml-auto text-muted" placeholder="Eamil"/>
			<a href="#" class="w-50 p-0 ">
		  <button type="button" class="text-white border-0 w-100">SUBSCRIBE</button>
				</a>  
				</form>
		
					<div class="tu mt-4">
						<i class="fa fa-facebook  mr-2  hs "></i>
						<i class="fa fa-twitter  mr-2  hs "></i>
						<i class="fa fa-vimeo  mr-2  hs "></i>
						<i class="fa fa-youtube-play  mr-2  hs "></i>
						<i class="fa fa-glide-g  mr-2  hs "></i>
						<i class="fa fa-camera-retro  mr-2  hs "></i>
					</div>
		
		
				</div>
				<!--尾- 中 -->
				<div class="col-lg-4 mt-4">
					<h5 style="color: white;font-weight: bold;">LATSET POSTS</h5><br>
					<div class="row">
						<!-- 图一 -->
						<div class="col-4">
							<img src="img/png-post-01.png" />
						</div>
						<div class="col-8 p-0">
							<h5 style="color: white;">Healthy Benefits Of Raw Food And Healthy Diet</h5>
							<p class="hs">Dec 30,2016</p>
						</div>
		
						<!-- 图二 -->
						<div class="col-4 mt-3">
							<img src="img/png-post-02.png" />
						</div>
						<div class="col-8 p-0 mt-3">
							<h5 style="color: white;">Healthy Benefits Of Raw Food And Healthy Diet</h5>
							<p class="hs">Dec 30,2016</p>
						</div>
						<!-- 图三 -->
						<div class="col-4 mt-3">
							<img src="img/png-post-03.png" />
						</div>
						<div class="col-8 p-0 mt-3">
							<h5 style="color: white;mar">Healthy Benefits Of Raw Food And Healthy Diet</h5>
							<p class="hs">Dec 30,2016</p>
						</div>
					</div>
				</div>
				<!--尾- 右 -->
				<div class="col-lg-4 px-5 mt-4 p-0 ">
					<h5 style="color: white;font-weight: bold;">POPULAR CATEGORY</h5><br>
					<!-- 列表 -->
						<p class="hs pr-lg-5 mb-2 f_zt" >Fragrances<span class="r_fd">15</span></p >
						<p class="hs pr-lg-5 mb-2 f_zt" >Hair Care<span class="r_fd">12</span></p >
						<p class="hs pr-lg-5 mb-2 f_zt" >Make Up<span class="r_fd">6</span></p >
						<p class="hs pr-lg-5 mb-2 f_zt" >Outfits<span class="r_fd" >5</span></p >
						<p class="hs pr-lg-5 mb-2 f_zt" >Skin Care<span class="r_fd">10</span></p >
						<p class="hs pr-lg-5 mb-2 f_zt" >Style<span class="r_fd">8</span></p>
						<p class="hs pr-lg-5 mb-2 f_zt" >Fashion<span class="r_fd">5</span></p >
						<p class="hs pr-lg-5 mb-2 f_zt">Lifestyle<span class="r_fd">2</span></p >
						<p class="hs pr-lg-5 mb-2 f_zt" >Wellness<span class="r_fd">3</span></p >
		
		
		
				</div>
		
			</div>
		
		
		</div>
		<!-- 最后一行 -->
		<div class="text-center " style="background-color: black;">
			<p class="py-4 m-0" style="color: gray;">Copyright 2018 Corporate WordPress Theme by <span style="color: red;">ThimPress</span></p>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			var a = $(".va");
			$(".add").click(function() {
				a.val(parseInt(a.val()) + 1);
			});
			$(".out").click(function() {
				a.val(parseInt(a.val()) - 1);
				if (a.val() <= 0) {
					a.val(1);
				}
			});
		})
	</script>
	
</html>
